<template>
  <lay-container
    fluid="true"
    style="padding: 10px"
    class="workbench"
  >
    <lay-row space="10">
      <lay-col md="24">

        <lay-card>
          <mearchMsg
            class="msg_val"
            @search="getSearch"
          />
          <lay-table
            id="detectionId"
            v-model:selected-keys="selectedKeys"
            :columns="columns"
            :dataSource="dataSource"
            :checkbox="checkbox"
            :default-toolbar="['filter']"
            :cell-style="cellStyle"
          >
            <template v-slot:status="{ data }">
              <!-- 状态,0待认领，1送审中，2待审核，3已审核，4已签发，5已归档 -->
              <div @click="claimTag(data)">
                <lay-tag
                  type="primary"
                  v-if="data.status == 0"
                >待认领</lay-tag>
                <lay-tag
                  type="normal"
                  v-if="data.status == 1"
                >送审中</lay-tag>
                <lay-tag
                  type="normal"
                  v-if="data.status == 2"
                >待审核</lay-tag>
                <lay-tag
                  type="normal"
                  v-if="data.status == 3"
                >已审核</lay-tag>
                <lay-tag
                  type="normal"
                  v-if="data.status == 4"
                >已签发</lay-tag>
                <lay-tag
                  type="normal"
                  v-if="data.status == 5"
                >已归档</lay-tag>
              </div>
            </template>
            <template v-slot:no1>
              <div>
                委托编号
                <lay-icon @click="headerPx({ordercolumnname: 'entrustmentNo', isascending: true})" type="layui-icon-up"></lay-icon>
                <lay-icon @click="headerPx({ordercolumnname: 'entrustmentNo', isascending: false})" type="layui-icon-down"></lay-icon>
              </div>
            </template>
            <template v-slot:no2>
              <div>
                样品编号
                <lay-icon @click="headerPx({ordercolumnname: 'sampleNo', isascending: true})" type="layui-icon-up"></lay-icon>
                <lay-icon @click="headerPx({ordercolumnname: 'sampleNo', isascending: false})" type="layui-icon-down"></lay-icon>
              </div>
            </template>
            <template v-slot:no3>
              <div>
                报告编号
                <lay-icon @click="headerPx({ordercolumnname: 'reportNo', isascending: true})" type="layui-icon-up"></lay-icon>
                <lay-icon @click="headerPx({ordercolumnname: 'reportNo', isascending: false})" type="layui-icon-down"></lay-icon>
              </div>
            </template>
          </lay-table>

          <lay-page
            v-model="current"
            v-model:limit="limit"
            :pages="pages"
            :total="total"
            :show-count="true"
            :show-limit="true"
            :showSkip="true"
            :show-page="true"
            @change="changePage"
          ></lay-page>
        </lay-card>
      </lay-col>
    </lay-row>

    <layers ref="layers" ></layers>
  </lay-container>
</template>
<script lang="ts">
import { isTemplateElement } from "@babel/types";
import {
  defineComponent,
  ref,
  onMounted,
  reactive,
  toRefs,
  nextTick,
  onUnmounted,
} from "vue";
import mearchMsg from "./component/search.vue";
import layers from "./component/layer.vue";
import {
  ObjectStatusCountSta,
  GetProjectSta,
  DetectionObjectSearch,
} from "../../../api/module/user";
import { httpServer } from "../../../api/config";
import { layer } from "@layui/layer-vue";
import { number } from "@intlify/core-base";

export default defineComponent({
  components: {
    mearchMsg,
    layers,
  },
  setup() {
    const fileUploads: any = ref();
    const clickFile = (event: any) => {
      fileUploads.value.dispatchEvent(new MouseEvent("click"));
    };

    const cellStyle = function (
      row: any,
      column: any,
      rowIndex: any,
      columnIndex: any
    ) {
      let arr = ["entrustmentNo", "sampleNo", "reportNo"];
      if (arr.includes(column.key)) {
        return "color:blue";
      }
    };

    const selectedKeys: any = ref([]);
    const checkbox = ref(true);

    const user: any = sessionStorage.getItem("userInfo");
    const userInfo: any = JSON.parse(user);

    let httpUrl: any = ref([]);
    onMounted(() => {
      let url: any = sessionStorage.getItem("httpUrl");
      httpUrl.value = JSON.parse(url);
      if (httpUrl.value.includes("/Checkmsg/DetectionObjectSearch")) {
        getProjectList();
      }
      getTabItem();
    });

    const data = reactive({
      url: httpServer,
      httpUrls: httpUrl,
      itemKey: 0,
      current: 1,
      projectId: null as any,
      total: 0,
      visible: false,
      pages: 0,
      curren: 10,
      limit: 10,
      tabs: "1",
      overDays: 0,
      btnIcon: true,
      tabItem: {
        unclaimsCount: 0,
        unclaims5Count: 0,
        unclaims15Count: 0,
        submittingCount: 0,
        checkPendingCount: 0,
        examineCount: 0,
        signissueCount: 0,
        filedCount: 0,
      } as any,
      dataSource: [],
      projectList: [] as any,
      timeData: {
        start: "",
        end: "",
      },
      search: {
        projectName: "",
        entrustmentNo: "",
        sampleNo: "",
        testItems: "",
        reportNo: "",
        client: "",
        sampleReceivingBTime: null,
        sampleReceivingETime: null,
      } as any,
      options: [],
      columns: [
        {
          title: "复选",
          width: "50px",
          type: "checkbox",
          fixed: "left",
        },
        {
          title: "序号",
          width: "60px",
          type: "number",
          fixed: "left",
        },

        {
          title: "状态",
          customSlot: "status",
          width: "100px",
        },
        {
          title: "检测人员",
          key: "tester",
          width: "180px",
          ellipsisTooltip: true,
        },
        {
          title: "报告管理人",
          key: "manager",
          width: "180px",
          ellipsisTooltip: true,
        },
        {
          title: "检测项目",
          key: "testItems",
          width: "180px",
          ellipsisTooltip: true,
        },
        {
          title: "委托编号",
          key: "entrustmentNo",
          width: "180px ",
          titleSlot: "no1",
          ellipsisTooltip: true,
        },
        {
          title: "样品编号",
          key: "sampleNo",
          width: "180px",
          titleSlot: "no2",
          ellipsisTooltip: true,
        },
        {
          title: "报告编号",
          key: "reportNo",
          width: "180px",
          titleSlot: "no3",
          ellipsisTooltip: true,
        },
        {
          title: "检测数量",
          key: "numberofTests",
          width: "80px",
        },
        {
          title: "单位",
          key: "unit",
          width: "80px",
        },
        {
          title: "设备",
          key: "deviceName",
          width: "100px",
          ellipsisTooltip: true,
        },
        {
          title: "结论状态",
          key: "conclusionStatus",
          width: "100px",
        },
        {
          title: "委托单位",
          key: "client",
          width: "200px",
          ellipsisTooltip: true,
        },
        {
          title: "工程名称",
          key: "projectName",
          width: "200px",
          ellipsisTooltip: true,
        },
        {
          title: "施工部位",
          key: "constructionPosition",
          width: "200px",
          ellipsisTooltip: true,
        },
        {
          title: "委托日期",
          key: "entrustmentDate",
          width: "160px",
          ellipsisTooltip: true,
        },
        {
          title: "规格型号",
          key: "model",
          width: "160px",
          ellipsisTooltip: true,
        },
        {
          title: "收样人",
          key: "sampleReceiver",
          width: "80px",
          ellipsisTooltip: true,
        },
        {
          title: "主检人",
          key: "principalInspector",
          width: "100px",
          ellipsisTooltip: true,
        },
        {
          title: "收费金额",
          key: "chargeAmount",
          width: "80px",
          ellipsisTooltip: true,
        },
        {
          title: "批准日期",
          key: "approvalDate",
          width: "160px",
          ellipsisTooltip: true,
        },
        {
          title: "检测时间",
          key: "detectionTime",
          width: "160px",
          ellipsisTooltip: true,
        },
        {
          title: "副检人",
          key: "deputyInspector",
          width: "80px",
          ellipsisTooltip: true,
        },
      ] as any,
    });

    const getProjectList = async () => {
      const res: any = await DetectionObjectSearch({
        pageIndex: data.current,
        pagePerCount: data.limit,
        condition: {
          ...data.search,
        },
      });
      if (res.code == 200) {
        console.log("DetectionObjectSearch", res);
        data.total = res.data.totalCount;
        // data.pages = res.data.pageCount;
        data.dataSource = res.data.datas;
      }
    };

    onUnmounted(() => {
      for (const key in data.search) {
        data.search[key] = "";
      }
    });

    const changePage = (item: any) => {
      data.limit = item.limit;
      data.current = item.current;
      getProjectList();
    };

    const getTabItem = async () => {
      if (data.httpUrls.includes("/Checkmsg/ObjectStatusCountSta")) {
        const res: any = await ObjectStatusCountSta({});
        if (res.code == 200) {
          data.tabItem = {
            ...res.data,
          };
          data.itemKey++;
        }
      }
    };

    const getSearch = (item: any) => {
      data.search = {
        ...data.search,
        ...item,
      };
      getProjectList();
    };

    const headerPx = (item: object) => {
      console.log('8888', item);
      
      data.search = {
        ...data.search,
        ...item,
      };
      getProjectList();
    };

    const layers: any = ref();
    const claimTag = async (item: any) => {
      layers.value.open(item);
    };

    return {
      claimTag,
      getSearch,
      layers,
      selectedKeys,
      checkbox,
      cellStyle,
      changePage,
      clickFile,
      fileUploads,
      headerPx,
      ...toRefs(data),
    };
  },
});
</script>

<style scoped>
.tabs .layui-tab-content {
  padding: 0 !important;
}
.workbench .layui-select {
  width: 178px !important;
}

.btn_alter .layui-upload-wrap {
  display: flex !important;
  align-items: center !important;
}
</style>
<style lang="scss" scoped>
.msg_val {
  margin-bottom: 8px;
}

.btn_alter {
  display: flex;
  align-items: center;

  .btn {
    margin-left: 20px;
  }
}
.tab_item {
  display: flex;
  align-items: center;
}
</style>
